<!--
 * @Description: 企业数据列表
 * @Author: Wilbur
 * @Date: 2019-01-21 08:37:54
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/8/31
-->

<template>
    <PageLayout title="企业数据列表">
        <template slot="header-right">
            <el-button
                type="primary"
                size="medium"
                @click="handleRoute('createHire')"
            >
                创建公司
            </el-button>
            <el-button
                type="primary"
                size="medium"
                v-if="authResult.auth_set_bond"
                @click="handleRoute('hireSetbond')"
            >
                保证金标签
            </el-button>
            <el-button
                type="primary"
                size="medium"
                :disabled="!authResult.auth_vas_config"
                @click="handleRoute('vasMoneyConfig')"
            >
                增值服务费调用设置
            </el-button>
        </template>
        <template slot="filter">
            <div class="filter-item">
                <el-radio-group
                    v-model="filterData.set_level"
                    @change="fnChangeTab"
                    size="medium"
                >
                    <el-radio-button :label="0">全部</el-radio-button>
                    <el-radio-button :label="1">会员</el-radio-button>
                    <el-radio-button :label="-1">非会员</el-radio-button>
                </el-radio-group>
            </div>
            <!--<div class="filter-item">
                <div class="filter-item__title">
                    广告主编号
                </div>
                <el-input
                    v-model.trim="filterData.hire_no"
                    placeholder="请输入广告主编号"
                    type="text"
                    size="medium"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                    style="width:224px"
                />
            </div>-->
            <div class="filter-item">
                <div class="filter-item__title">
                    名称
                </div>
                <el-input
                    v-model.trim="filterData.search_content"
                    placeholder="请输入公司名称/登录账号"
                    type="text"
                    size="medium"
                    style="width: 224px;"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <div class="filter-item">
                <div class="filter-item__title">
                    已缴清上月账单
                </div>
                <el-select
                    v-model="filterData.student_bill_money_status"
                    filterable
                    placeholder="请选择"
                    size="medium"
                    style="width: 152px"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in selectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                </el-select>
            </div>
            <div class="filter-item">
                <div class="filter-item__title">
                    客户类型
                </div>
                <el-select
                    v-model="filterData.shop_group"
                    placeholder="全部"
                    size="medium"
                    filterable
                    style="width: 152px"
                    @change="getTableData(1)"
                >
                    <el-option
                        label="全部"
                        :value="99"
                    />
                    <el-option
                        label="未设置"
                        :value="0"
                    />
                    <el-option
                        v-for="item in shop_group_list"
                        :key="item.shop_group"
                        :label="item.title"
                        :value="item.shop_group"
                    />
                </el-select>
            </div>
            <div class="filter-item">
                <div class="filter-item__title">
                    增值服务费权限
                </div>
                <el-select
                    v-model="filterData.vas_money_use_apply_enable"
                    placeholder="全部"
                    size="medium"
                    filterable
                    style="width: 152px"
                    @change="getTableData(1)"
                >
                    <el-option
                        label="全部"
                        :value="99"
                    />
                    <el-option
                        label="有权限"
                        :value="1"
                    />
                    <el-option
                        label="无权限"
                        :value="0"
                    />
                </el-select>
            </div>
            <div class="filter-item">
                <el-button
                    size="small"
                    type="primary"
                    class="query-button"
                    @click="getTableData(1)"
                >查询
                </el-button>
            </div>
        </template>
        <el-table
            :data="tableData"
            style="width: 100%;"
            height="100%"
            class="data-table"
            v-loading="tableLoading"
            @sort-change="handleSortChanged"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                label="序号"
                fixed="left"
                type="index"
                align="center"
                width="60"
            />
            <el-table-column
                label="公司名称"
                prop="company_name"
                :formatter="emptyFormatter"
                width="186"
                fixed="left"
                show-overflow-tooltip
            />
            <el-table-column
                label="远程任务金额"
                width="130"
            >
                <template slot-scope="{row}">
                    {{ row.shop_info.task_stuagent_money ? `￥${row.shop_info.task_stuagent_money}` : `--` }}
                    <el-button
                        type="text"
                        size="medium"
                        @click="showChargeLog(row)"
                    >
                        查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                label="客户类型"
                prop="shop_info.shop_group_title"
                :formatter="emptyFormatter"
                width="100"
                show-overflow-tooltip
            />
            <el-table-column
                :formatter="emptyFormatter"
                prop="shop_info.shop_title"
                show-overflow-tooltip
                label="店铺名称"
                width="172"
            />
            <el-table-column
                label="地区"
                prop="login_area"
                width="110"
                :formatter="emptyFormatter"
                show-overflow-tooltip
            />
            <el-table-column
                label="公司行业"
                prop="company_category_name"
                :formatter="emptyFormatter"
                show-overflow-tooltip
            />
            <el-table-column
                label="登录次数"
                prop="login_count"
                :formatter="emptyFormatter"
                show-overflow-tooltip
                sortable="custom"
                :min-width="100"
            />
            <el-table-column
                prop="username"
                :min-width="150"
                show-overflow-tooltip
                label="登录账号"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        slot="reference"
                        v-if="scope.row.username == ''"
                        @click="fnShowAccount(scope.row.hire_no)"
                        size="small">查看账号
                    </el-button>
                    <span v-if="scope.row.username != ''">{{ scope.row.username }}</span>
                    <el-popover
                        placement="right"
                        width="400"
                        popper-class="log-popper"
                        title="日志"
                        trigger="click">
                        <ul class="log-list">
                            <li v-if="logList.length == 0">暂无数据</li>
                            <li
                                v-for="(item, index) in logList"
                                :key="index">
                                <span>{{
                                    item.content
                                }}</span><span>{{
                                    item.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm')
                                }}</span>
                            </li>
                        </ul>
                        <el-button
                            type="text"
                            slot="reference"
                            @click="fnShowLogList(scope.row.hire_no)"
                            size="small">日志
                        </el-button>
                    </el-popover>
                    <!-- {{ scope.row.username }} -->
                </template>
            </el-table-column>
            <el-table-column
                prop="student_bill_money_this_month_pay"
                :formatter="emptyFormatter"
                show-overflow-tooltip
                label="上月账单金额"
                align="center"
                sortable
                :width="130"
            />
            <el-table-column
                prop="student_bill_money_status"
                :formatter="emptyFormatter"
                show-overflow-tooltip
                label="上月账单状态"
                align="center"
                :width="130"
            >
                <template slot-scope="scope">
                    <div class="status-wrapper">
                        <div
                            :class="['status-dot', scope.row.student_bill_money_status ? 'normal' : 'danger']"/>
                        <p v-if="scope.row.student_bill_money_status == 1">已缴清</p>
                        <p v-else-if="scope.row.student_bill_money_status == 0">未缴清</p>
                        <p v-else>--</p>
                    </div>
                </template>
            </el-table-column>
            <!--<el-table-column
                :formatter="emptyFormatter"
                prop="money"
                :min-width="90"
                show-overflow-tooltip
                label="账户余额"
            />-->
            <el-table-column
                :formatter="emptyFormatter"
                prop="deposit.vas_money"
                label="增值服务费"
                :width="140"
            >
                <template slot-scope="scope">
                    {{ scope.row.deposit.vas_money || '--' }}
                    <el-button
                        type="text"
                        style="text-decoration: underline;color: #F5A623"
                        v-if="scope.row.deposit.vas_money_use_apply_wait_verify"
                        @click="handleRoute('setVasMoney', {
                            shop_no: scope.row.shop_info.shop_no,
                            has_verify: scope.row.deposit.vas_money_use_apply_enable,
                            active: 2
                        })"
                    >
                        待处理
                    </el-button>
                </template>
            </el-table-column>
            <!--<el-table-column
                :formatter="emptyFormatter"
                prop="deposit.vas_remark"
                show-overflow-tooltip
                label="增值服务备注"
                :width="140"
            />-->
            <el-table-column
                label="保证金金额"
                :formatter="emptyFormatter"
                prop="deposit.deposit_money"
                :min-width="90"
                show-overflow-tooltip
            />
            <el-table-column
                label="保证金标签"
                :formatter="emptyFormatter"
                prop="deposit"
                :min-width="130"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <div class="zd-deposit-wrap">
                        <img
                            v-if="scope.row.level_logo !== ''"
                            :src="scope.row.level_logo"
                            class="zd-deposit-price"
                        >
                        <span>
                            {{ scope.row.level_money }}元
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="commission_tax_status"
                label="佣金发票"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :min-width="100"
            >
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.commission_tax_status"
                        :active-value="1"
                        :inactive-value="0"
                        @change="fnSettingCommission(scope.row)"
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                :min-width="160"
                sortable="custom"
                label="创建时间"
            >
                <template slot-scope="scope">
                    {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注"
                width="120"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.remark">{{ scope.row.remark }}</template>
                    <template v-else>--</template>
                </template>
            </el-table-column>
            <!--v2.1.6隐藏-->
            <!--<el-table-column
                :formatter="emptyFormatter"
                prop="deposit.deposit_time"
                :min-width="90"
                show-overflow-tooltip
                label="可提现时间"
            >
                <template slot-scope="scope">
                    {{ scope.row.deposit['deposit_time'] * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                :formatter="emptyFormatter"
                prop="cart_item_count"
                show-overflow-tooltip
                :width="100"
                label="购物车数量"
            />
            <el-table-column
                prop="vip"
                :min-width="70"
                label="会员">
                <template slot-scope="scope">
                    <span v-if="scope.row.vip == 0">非会员</span>
                    <span v-if="scope.row.vip == 1">普通会员</span>
                    <span v-if="scope.row.vip == 2">会员+校园大使</span>
                    <span v-if="scope.row.vip == 3">会员+品牌联动</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="login_time"
                :min-width="150"
                label="会员到期时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.vip_expire_time == -1">永不过期</span>
                    <span v-if="scope.row.vip_expire_time != -1">{{ scope.row.vip_expire_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="login_time"
                :min-width="150"
                sortable="custom"
                label="登录时间">
                <template slot-scope="scope">
                    {{ scope.row.login_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>-->
            <el-table-column
                label="操作"
                fixed="right"
                width="278"
            >
                <template slot-scope="scope">
                    <div class="option-btn-group">
                        <el-button
                            type="text"
                            @click="fnGoManage(scope.row)"
                        >
                            商家后台
                        </el-button>
                        <el-button
                            type="text"
                            @click="handleRoute('createHire', {hire_no: scope.row.hire_no})"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="text"
                            @click="fnShowRemarkDialog(scope.row.hire_no)"
                        >
                            备注
                        </el-button>
                        <el-button
                            type="text"
                            style="color: #F95B56"
                            v-if="scope.row.status == 1"
                            :disabled="!authResult.auth_set_status"
                            @click="fnSetHireStatus(scope.row.hire_no, 0)"
                        >
                            禁用
                        </el-button>
                        <el-button
                            type="text"
                            :disabled="!authResult.auth_set_status"
                            v-if="scope.row.status == 0"
                            @click="fnSetHireStatus(scope.row.hire_no, 1)"
                        >
                            解禁
                        </el-button>
                        <el-button
                            type="text"
                            v-if="scope.row.vip !== 0"
                            @click="fnSetprice(scope.row)"
                        >
                            保证金标签
                        </el-button>
                        <el-button
                            type="text"
                            @click="handleRoute('setDepositMoney', {
                                shop_no: scope.row.shop_info.shop_no
                            })"
                        >
                            保证金处理
                        </el-button>
                        <el-button
                            type="text"
                            @click="handleRoute('setVasMoney', {
                                shop_no: scope.row.shop_info.shop_no,
                                has_verify: scope.row.deposit.vas_money_use_apply_enable
                            })"
                        >
                            增值服务费
                        </el-button>
                        <el-button
                            type="text"
                            @click="handleChargeTaskMoney(scope.row)"
                        >
                            任务资产充值
                        </el-button>

                        <!--v2.1.6隐藏-->
                        <!--<el-button
                            type="text"
                            @click="fnShowMoneyDialog(scope.row.hire_no)"
                        >余额</el-button>
                        <el-button
                            type="text"
                            @click="fnCreateShop(scope.row)"
                        >创建店铺</el-button>
                        <el-button
                            type="text"
                            v-if="scope.row.vip != 0"
                            @click="fnCancelVip(scope.row.hire_no)"
                        >取消会员</el-button>
                        <el-button
                            type="text"
                            v-if="scope.row.vip == 0"
                            :disabled="!authResult.auth_set_vip"
                            @click="fnSetVip(scope.row.hire_no)"
                        >设置会员</el-button>
                        <el-button
                            type="text"
                            @click="handleRoute('HireWorkerList', {hire_no: scope.row.hire_no, hire_name: scope.row.company.name})"
                        >校园代理</el-button>
                        <el-button
                            type="text"
                            @click="fnWithods(scope.row)"
                            :disabled="!authResult.auth_set_money"
                        >保证金充值</el-button>
                        <el-button
                            type="text"
                            @click="handleRoute('hireSchoolAuth', {hire_no: scope.row.hire_no})"
                        >学校权限设置</el-button>-->
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <template slot="pagination">
            <div/>
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="page.page_id"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </template>
        <!-- 填写备注 -->
        <el-dialog
            title="填写备注"
            width="475px"
            @close="resetForm('ruleForm')"
            :visible.sync="showRemarkDialog">
            <el-form
                :model="remarkForm"
                :rules="rules"
                ref="ruleForm"
                label-position="right"
            >
                <el-form-item
                    prop="remark"
                    label-width="0">
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="remarkForm.remark"
                        autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button
                    size="medium"
                    style="width: 100px"
                    @click="resetForm('ruleForm')"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 100px;margin-left: 24px"
                    @click="submitForm('ruleForm')">确 定
                </el-button>
            </div>
        </el-dialog>
        <!-- 赠送会员弹窗 -->
        <el-dialog
            title="设置会员"
            width="437px"
            :visible.sync="dialogVipFlag">
            <el-form
                :model="formVip"
                :rules="rulesVip"
                ref="ruleFormVip">

                <el-form-item
                    label="设置时间"
                    prop="append_vip_month"
                    label-width="100px">
                    <el-select
                        v-model="formVip.append_vip_month"
                        style="width: 270px;"
                        placeholder="请选择会员时长">
                        <el-option
                            label="一个月"
                            :value="1"/>
                        <el-option
                            label="12个月"
                            :value="12"/>
                        <el-option
                            label="24个月"
                            :value="24"/>
                    </el-select>

                </el-form-item>
                <el-form-item
                    label="会员类型"
                    prop="vip"
                    label-width="100px">
                    <el-select
                        v-model="formVip.vip"
                        style="width: 270px;"
                        placeholder="选择会员类型">
                        <el-option
                            label="1万/年版"
                            :value="1"/>
                        <el-option
                            label="1.5万/年版"
                            :value="2"/>
                        <el-option
                            label="2万元/年版"
                            :value="3"/>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="打款金额"
                    prop="money"
                    label-width="100px">
                    <el-input
                        v-model="formVip.money"
                        type="number"
                        style="width: 270px;"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="fnResetVipForm('ruleFormVip')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSubmitVipForm('ruleFormVip')">确 定
                </el-button>
            </div>
        </el-dialog>
        <!-- 余额弹窗 -->
        <el-dialog
            title="余额操作"
            width="470px"
            :before-close="handleClose"
            :visible.sync="moneyDialogFlag">
            <el-form
                :model="form"
                :rules="rules1"
                ref="ruleFormMoney">
                <el-form-item
                    label="操作类型"
                    prop="type"
                    :label-width="formLabelWidth">
                    <el-select
                        v-model="form.type"
                        style="width:350px;"
                        placeholder="请选择操作类型">
                        <el-option
                            label="充值"
                            :value="1"/>
                        <el-option
                            label="支出"
                            :value="2"/>
                        <el-option
                            label="退款"
                            :value="3"/>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="操作金额"
                    prop="money"
                    :label-width="formLabelWidth">
                    <el-input
                        v-model="form.money"
                        type="number"
                        autocomplete="off"/>
                </el-form-item>
                <el-form-item
                    label="合同编号"
                    prop="contract_no"
                    :label-width="formLabelWidth">
                    <el-input
                        v-model="form.contract_no"
                        autocomplete="off"/>
                </el-form-item>
                <el-form-item
                    label="备注"
                    prop="remark"
                    :label-width="formLabelWidth">
                    <el-input
                        v-model="form.remark"
                        type="textarea"
                        placeholder="请填写备注内容"
                        autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="fnResetMoneyChangeForm('ruleFormMoney')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSubmitMoneyChange('ruleFormMoney')">确 定
                </el-button>
            </div>
        </el-dialog>
        <!-- 设置保证金 -->
        <el-dialog
            title="选择保证金"
            :visible.sync="dialogVisibleBood"
            width="400px"
            :close-on-click-modal="true"
            center
        >
            <div class="zd-select-bood">
                <el-radio
                    v-model="bood"
                    :label="item.level_no"
                    v-for="(item,index) in boodList"
                    :key="index"
                    class="zd-select-radio"
                >
                    <div class="zd-bood-wrap">
                        <img
                            :src="item.level_logo"
                            class="zd-bood-image"
                        >
                        <p>{{ item.level_money }}元</p>
                    </div>
                </el-radio>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="fnConfirmbood()"
                    size="small"
                >
                    确 定
                </el-button>
            </span>
        </el-dialog>

        <!-- 保证金充值 -->
        <el-dialog
            title="充值保证金"
            :visible.sync="dialogDeposit"
            width="530px"
            :close-on-click-modal="true"
        >
            <el-form
                :model="ruleFormDep"
                ref="ruleFormDep"
                label-width="10px"
                class="demo-ruleForm"
            >
                <el-form-item>
                    <div class="zd-wrap">
                        <el-radio
                            v-model="ruleFormDep.selectTime"
                            label="1"
                        >
                            快速设置时间
                        </el-radio>
                        <el-select
                            v-model="ruleFormDep.fast_time"
                            placeholder="保证金提现时限"
                            size="small"
                            :style="{pointerEvents: ruleFormDep.selectTime == '2' ? 'none' : '', opacity: ruleFormDep.selectTime == '2' ? '0.5' : '',width: '100%'}"
                        >
                            <el-option
                                v-for="item in dateList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="zd-wrap">
                        <el-radio
                            v-model="ruleFormDep.selectTime"
                            label="2"
                        >
                            手动设置时间
                        </el-radio>
                        <el-date-picker
                            v-model="ruleFormDep.expres_time"
                            type="datetime"
                            placeholder="设置具体可提现时间"
                            align="right"
                            size="small"
                            :style="{pointerEvents: ruleFormDep.selectTime == '1' ? 'none' : '', opacity: ruleFormDep.selectTime == '1' ? '0.5' : '',width: '100%'}"
                        />
                        <!-- :picker-options="pickerOptions" -->
                    </div>
                </el-form-item>
                <el-form-item
                    label="保证金金额"
                    label-width="120px"
                >
                    <el-input-number
                        v-model="ruleFormDep.money"
                        size="small"
                        style="margin-left: 31px"
                        :min="0"
                        :controls="false"
                        :step="1"
                        :precision="2"
                        :step-strictly="true"/>
                    <span>元</span>
                    <p style="font-size:12px;margin-left: 31px;color:#333">* 该金额在设置时间到期后可提现，请核实实际款项后慎重填写</p>
                </el-form-item>
                <el-form-item
                    label="增值服务费"
                    label-width="120px"
                >
                    <el-input-number
                        v-model="ruleFormDep.vas_money"
                        size="small"
                        style="margin-left: 31px"
                        :min="0"
                        :controls="false"
                        :step="1"
                        :precision="2"
                        :step-strictly="true"/>
                    <span>元</span>
                </el-form-item>
                <el-form-item
                    label="增值服务备注"
                    label-width="120px"
                >
                    <el-input
                        v-model="ruleFormDep.vas_remark"
                        type="textarea"
                        placeholder="请填写增值服务备注"
                        :autosize="{ minRows: 2, maxRows: 6 }"
                        style="width: 300px; margin-left: 31px"
                    />
                </el-form-item>
                <el-form-item>
                    <div style="display:flex;justify-content: center;width:100%">
                        <el-button
                            size="small"
                            style="width:100px"
                            @click="dialogDeposit = false"
                        >
                            取消
                        </el-button>
                        <el-button
                            type="primary"
                            size="small"
                            style="width:100px;margin-left:80px !important"
                            :disabled=" (ruleFormDep.fast_time || ruleFormDep.expres_time) && ruleFormDep.money < 0"
                            @click="fnSetDepost()"
                        >
                            确定
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 创建店铺 -->
        <el-dialog
            title="请创建店铺"
            :visible.sync="dialogShop"
            width="530px"
            :close-on-click-modal="true"
            center
        >
            <div class="zd-shop">
                <p class="zd-shop-title">
                    店铺名称:
                </p>
                <el-input
                    placeholder="请输入内容"
                    v-model="shop_title"
                    clearable
                    size="small"
                    maxlength="30"
                    show-word-limit
                />
            </div>
            <el-button
                size="small"
                @click="fnConfirmShop()"
                type="primary"
                class="zd-shop-button"
            >
                创建店铺
            </el-button>
        </el-dialog>
    </PageLayout>
</template>

<script>
import {chargeMoneyDialog} from "@/components/shop-manage/charge-money-dialog";
import {chargeMoneyLog} from "@/components/shop-manage/charge-money-log";

let sortFieldMap = {
    create_time: 0,
    login_time: 2,
    login_count: 1,
    student_bill_money_status: 3
};

let sortTypeMap = {
    'ascending': 1,
    'descending': 0
};

export default {
    components: {},
    data() {
        var validateMoney = (rule, value, callback) => {
            if (value == 0) {
                callback(new Error('请输入赠送金额'));
            } else if (value.indexOf('.') != -1 && value.toString().split('.')[1].length > 2) {
                callback(new Error('请输入正确的赠送金额'));
            } else {
                callback();
            }
        };

        return {
            room_series_count: 0,//推广寝室数量
            selectList: [{
                value: 99,
                label: '全部'
            }, {
                value: 0,
                label: '否'
            }, {
                value: 1,
                label: '是'
            }],
            shop_title: '',//店铺标题
            dialogShop: false,//创建店欧弹窗
            dateList: [],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '6个月',
                    onClick(picker) {
                        let year = new Date(new Date()).getFullYear(),
                            month = new Date(new Date()).getMonth() + 1,
                            day = new Date(new Date()).getDate(),
                            date = new Date();

                        month = Number(month) + Number(6);

                        if (month < 10) {
                            month = '0' + month;
                        } else if (month > 10 && month <= 12) {
                            //
                        } else if (month > 12) {
                            let addYear = parseInt(month / 12);

                            year = Number(year) + Number(addYear);
                            month = month % 12 == 0 ? 1 : month % 12;
                        }

                        day = day < 10 ? '0' + day : day;

                        date.setTime(new Date(year + '-' + month + '-' + day).getTime());
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '1年',
                    onClick(picker) {
                        let year = new Date(new Date()).getFullYear(),
                            month = new Date(new Date()).getMonth() + 1,
                            day = new Date(new Date()).getDate(),
                            date = new Date();

                        month = Number(month) + Number(12);

                        if (month < 10) {
                            month = '0' + month;
                        } else if (month > 10 && month <= 12) {
                            //
                        } else if (month > 12) {
                            let addYear = parseInt(month / 12);

                            year = Number(year) + Number(addYear);
                            month = month % 12 == 0 ? 1 : month % 12;
                        }

                        day = day < 10 ? '0' + day : day;

                        date.setTime(new Date(year + '-' + month + '-' + day).getTime());
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '2年',
                    onClick(picker) {
                        let year = new Date(new Date()).getFullYear(),
                            month = new Date(new Date()).getMonth() + 1,
                            day = new Date(new Date()).getDate(),
                            date = new Date();

                        month = Number(month) + Number(24);

                        if (month < 10) {
                            month = '0' + month;
                        } else if (month > 10 && month <= 12) {
                            //
                        } else if (month > 12) {
                            let addYear = parseInt(month / 12);

                            year = Number(year) + Number(addYear);
                            month = month % 12 == 0 ? 1 : month % 12;
                        }

                        day = day < 10 ? '0' + day : day;

                        date.setTime(new Date(year + '-' + month + '-' + day).getTime());
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '3年',
                    onClick(picker) {
                        let year = new Date(new Date()).getFullYear(),
                            month = new Date(new Date()).getMonth() + 1,
                            day = new Date(new Date()).getDate(),
                            date = new Date();

                        month = Number(month) + Number(36);

                        if (month < 10) {
                            month = '0' + month;
                        } else if (month > 10 && month <= 12) {
                            //
                        } else if (month > 12) {
                            let addYear = parseInt(month / 12);

                            year = Number(year) + Number(addYear);
                            month = month % 12 == 0 ? 1 : month % 12;
                        }

                        day = day < 10 ? '0' + day : day;

                        date.setTime(new Date(year + '-' + month + '-' + day).getTime());
                        picker.$emit('pick', date);
                    }
                }]
            },
            ruleFormDep: {
                selectTime: '2',
                fast_time: '',
                expres_time: '',
                money: 0,
                vas_remark: '',
                vas_money: 0
            },
            dialogDeposit: false,
            hire_no: '',
            bood: '',
            dialogVisibleBood: false,
            boodList: [],//保证金
            logList: [],
            authResult: {},
            showRemarkDialog: false,
            remarkForm: {
                remark: ''
            },
            sortData: {
                sort_field: 0,
                sort_type: 1
            },
            rules: {
                remark: [
                    {required: true, message: '请输入备注', trigger: 'blur'}
                ]
            },
            tableData: [],
            tableLoading: false,
            filterData: {
                search_content: '',
                set_level: 0,
                hire_no: '',
                student_bill_money_status: 99,
                shop_group: 99,
                vas_money_use_apply_enable: 99
            },
            hireNo: '',
            page: {
                page_id: 1,
                total_count: 0,
                page_size: 0
            },
            currTime: 0,
            dialogVipFlag: false,
            formVip: {
                money: '',
                append_vip_month: '',
                vip: ''
            },
            rulesVip: {
                money: [
                    {required: true, message: '请输入打款金额', trigger: 'blur'}
                ],
                append_vip_month: [
                    {required: true, message: '请选择会员时长', trigger: 'change'}
                ],
                vip: [
                    {required: true, message: '请选择会员类型', trigger: 'change'}
                ]
            },
            moneyDialogFlag: false,
            form: {
                type: '',
                money: '',
                remark: '',
                contract_no: '',
            },
            formLabelWidth: '80px',
            rules1: {
                money: [
                    {required: true, message: '请输入金额', trigger: 'blur'},
                    {validator: validateMoney, trigger: 'blur'}
                ],
                type: [
                    {required: true, message: '请选择操作类型', trigger: 'change'}
                ]
            },
            shop_group_list: []
        };
    },
    watch: {
        dialogVisibleBood(val) {
            if (!val) {
                this.bood = '';
            }
        },
        dialogShop(val) {
            if (!val) {
                this.shop_title = '';
            }
        }
    },
    mounted() {
        this.dateList = [{
            value: this.setTemp(new Date(), 6),
            label: '6个月'
        }, {
            value: this.setTemp(new Date(), 12),
            label: '12个月'
        }, {
            value: this.setTemp(new Date(), 24),
            label: '24个月'
        }, {
            value: this.setTemp(new Date(), 36),
            label: '36个月'
        }];

        // 获取保留筛选参数
        if(sessionStorage.getItem('HIRE_LIST_QUERY')) {
            let query = JSON.parse(sessionStorage.getItem('HIRE_LIST_QUERY'));

            this.filterData.search_content = query.search_content;
            this.filterData.set_level = query.set_level;
            this.filterData.hire_no = query.hire_no;
            this.filterData.student_bill_money_status = query.student_bill_money_status;
            this.filterData.vas_money_use_apply_enable = query.vas_money_use_apply_enable;
            this.filterData.shop_group = query.shop_group;
            this.page.page_id = Number(sessionStorage.getItem('HIRE_LIST_PAGE'));
            sessionStorage.removeItem('HIRE_LIST_QUERY');
            sessionStorage.removeItem('HIRE_LIST_PAGE');
        }

        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [{title: "官网"}, {title: '企业数据列表'}]);
        this.getBoodList();
        this.getShopGroupList();
        this.getTableData();
    },
    filters: {
        emptyFilter(val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    },
    methods: {

        /**
         * 获取客户类型列表
         */
        getShopGroupList() {
            this.$post('/student/shop_group%5Cget_list_for_select', {}, resp => {
                if (resp.code === 1) {
                    this.shop_group_list = resp.data.list;
                }
            });
        },

        /**
         * 创建店铺
         */
        fnCreateShop(row) {
            this.dialogShop = !this.dialogShop;
            this.hire_no = row.hire_no;
        },

        /**
         * 确定创建
         */
        fnConfirmShop() {
            if (!this.shop_title) {
                this.$message({
                    type: 'warning',
                    message: '店铺名称不可以为空',
                    center: true
                });
                return;
            }

            this.$post('/student/shop%5Ccreate', {
                hire_no: this.hire_no,
                shop_title: this.shop_title
            }, resp => {
                if (resp.code == 1) {
                    this.dialogShop = !this.dialogShop;
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '创建成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        //获取保证金数据
        getBoodList() {
            this.$post('/student/hire_level%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.boodList = resp.data.list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        //设置保证金
        fnSetprice(row) {
            this.bood = row.level_no;
            this.hire_no = row.hire_no;
            this.dialogVisibleBood = true;
        },

        //获取保证金充值
        fnWithods(row) {
            this.hire_no = row.hire_no;
            this.ruleFormDep = {
                selectTime: '2',
                fast_time: '',
                expres_time: row.deposit['deposit_time'] == 0 ? '' : row.deposit['deposit_time'] * 1000,
                money: row.deposit['deposit_money'] == 0 ? '' : row.deposit['deposit_money'],
                vas_remark: '',
                vas_money: row.deposit['vas_money']
            };
            this.dialogDeposit = !this.dialogDeposit;
        },

        //确定选择保证金
        fnConfirmbood() {
            if (this.bood == '') {
                this.$message({
                    type: 'warning',
                    message: '请先选择保证金,不可以为空',
                    center: true
                });
                return;
            }

            this.$post('/student/shop%5Cset_level', {
                hire_no: this.hire_no,
                level_no: this.bood
            }, resp => {
                if (resp.code == 1) {
                    this.dialogVisibleBood = !this.dialogVisibleBood;
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                    this.getTableData();
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });

            // this.$prompt('请输入保证金', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     inputPattern: /^([1-9][0-9]*)+(.[0-9]{1,5})?$/,
            //     inputErrorMessage: '格式不正确'
            // }).then(({ value }) => {
            // }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '取消输入'
            //     });
            // });
        },

        //设置保证金
        fnSetDepost() {
            if (Number(this.ruleFormDep.money) < 0) {
                this.$message({
                    type: 'warning',
                    message: '保证金金额不可以小于0',
                    center: true
                });
                return;
            }

            let time = this.ruleFormDep.selectTime == '1' ? this.ruleFormDep.fast_time : this.ruleFormDep.expres_time;

            this.$post('/student/hire_user%5Cset_deposit', {
                hire_no: this.hire_no,
                deposit_time: new Date(time).getTime() / 1000,
                deposit_money: this.ruleFormDep.money,
                vas_remark: this.ruleFormDep.vas_remark,
                vas_money: this.ruleFormDep.vas_money
            }, resp => {
                if (resp.code == 1) {
                    this.dialogDeposit = !this.dialogDeposit;
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                    this.getTableData();
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });

        },

        /**
         * 佣金开关
         */
        fnSettingCommission(row) {
            this.$post('/wei4/hire_user%5Cset_commission_tax_status', {
                hire_no: row.hire_no,
                status: row.commission_tax_status
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    });
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 获取n月后的当天时间戳
         * @param  {Number}    temp      //时间戳
         * @param  {Number}    param     //第n月
         */
        setTemp(temp, param) {
            let year = new Date(temp).getFullYear(),
                month = new Date(temp).getMonth() + 1,
                day = new Date(temp).getDate();

            month = Number(month) + Number(param);

            if (month < 10) {
                month = '0' + month;
            } else if (month > 10 && month <= 12) {
                //
            } else if (month > 12) {
                year = Number(year) + parseInt(month / 13);
                month = month - 12 * Math.floor(Number(month) / 12) == 0 ? 12 : month - 12 * Math.floor(Number(month) / 12);
            }

            day = day < 10 ? '0' + day : day;

            return new Date(year + '-' + month + '-' + day).getTime();
        },

        fnSetHireStatus(hire_no, status) {
            this.$post('/wei4/hire_user%5Cset_status', {
                hire_no: hire_no,
                status: status
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                    this.getTableData();
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        handleClose(done) {
            this.fnResetMoneyChangeForm('ruleFormMoney');
            done();
        },
        fnSubmitMoneyChange(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/wei4/hire_user%5Cchange_money', {
                        hire_no: this.hireNo,
                        type: this.form.type,
                        contract_no: this.form.contract_no,
                        money: this.form.money,
                        remark: this.form.remark
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                            this.fnResetMoneyChangeForm('ruleFormMoney');
                            this.getTableData();
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        fnSubmitVipForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/wei4/hire_user%5Cset_vip', {
                        hire_no: this.hireNo,
                        append_vip_month: this.formVip.append_vip_month,
                        money: this.formVip.money,
                        vip: this.formVip.vip
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                            this.fnResetVipForm('ruleFormVip');
                            this.getTableData();
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        fnResetMoneyChangeForm(formName) {
            this.moneyDialogFlag = false;
            this.$refs[formName].resetFields();
        },
        fnResetVipForm(formName) {
            this.dialogVipFlag = false;
            this.$refs[formName].resetFields();
        },
        fnSetVip(hire_no) {
            this.hireNo = hire_no;
            this.dialogVipFlag = true;
        },
        fnCancelVip(hire_no) {
            this.$confirm('是否取消企业的会员?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/wei4/hire_user%5Ccancel_vip', {
                    hire_no: hire_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        fnChangeTab() {
            this.getTableData(1);
        },
        fnShowAccount(hire_no) {
            this.$post('/student/hire_user%5Cget_username', {
                hire_no: hire_no
            }, resp => {
                if (resp.code == 1) {
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].hire_no == hire_no) {
                            this.tableData[i].username = resp.data.username;
                        }
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnShowLogList(hire_no) {
            this.$post('/student/hire_user%5Cget_log_list', {
                type: 1,
                hire_no: hire_no
            }, resp => {
                if (resp.code == 1) {
                    this.logList = resp.data.list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnShowMoneyDialog(hire_no) {
            this.hireNo = hire_no;
            this.moneyDialogFlag = true;
        },
        fnGoManage(row) {
            this.$post('/wei4/hire_user%5Cget_login_session_ticket', {
                hire_no: row.hire_no
            }, resp => {
                if (resp.code == 1) {
                    if (row.vip == 0) {
                        window.open(`${this.$shopBaseUrl}/resource?session_ticket=${resp.data.session_ticket}`);
                        // if(window.location.host == 'phaadmin.wxhand.com') {
                        //     window.open('http://cms.zsdx.cn/resource?session_ticket=' + resp.data.session_ticket);
                        // }else{
                        //     window.open('http://gt.wxhand.com/resource?session_ticket=' + resp.data.session_ticket);
                        // }
                    }
                    if (row.vip !== 0) {
                        window.open(`${this.$shopBaseUrl}/manage/lead?session_ticket=${resp.data.session_ticket}`);
                        // if(window.location.host == 'phaadmin.wxhand.com') {
                        //     window.open('http://cms.zsdx.cn/manage/lead?session_ticket=' + resp.data.session_ticket);
                        // }else{
                        //     window.open('http://gt.wxhand.com/manage/lead?session_ticket=' + resp.data.session_ticket);
                        // }
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fnChangeRemark(this.hireNo);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.showRemarkDialog = false;
        },
        fnShowRemarkDialog(no) {
            this.hireNo = no;
            this.showRemarkDialog = true;
        },
        fnChangeRemark(hire_no) {
            this.$post('/wei4/hire_user%5Cremark', {
                hire_no: hire_no,
                remark: this.remarkForm.remark,
            }, resp => {
                if (resp.code == 1) {
                    this.resetForm('ruleForm');
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.tableLoading = true;
            let time = new Date().getTime();

            this.currTime = time;

            this.$post('/student/hire_user%5Cget_list', {
                ...this.filterData,
                sort_field: this.sortData.sort_field,
                sort_type: this.sortData.sort_type,
                page_id: page || this.page.page_id,
                page_size: 100,
            }, resp => {
                if (this.currTime != time) {
                    return;
                }
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.page_id = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if (this.page.page_id > resp.data.page.total_page && this.page.page_id !== 1) {
                        this.getTableData(resp.data.page.total_page);
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: resp.msg
                    });
                }
                this.tableLoading = false;
            });
        },
        /**
         * 排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 0,
                descending: 1
            };

            let sortFieldMap = {
                create_time: 0,
                login_count: 1,
                login_time: 2,
                student_bill_money_this_month_pay: 3
            };

            if (data.order) {
                this.sortData.sort_field = sortFieldMap[data.prop];
                this.sortData.sort_type = sortTypeMap[data.order];
            } else {
                this.sortData.sort_field = '';
                this.sortData.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * 选择表格行
         */
        handleSelectionChange(val) {
            let arr = [];

            val.forEach(item => {
                if (item.score > 0) {
                    arr.push(item.user_no);
                }
            });
            this.transformIds = [].concat(arr);
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
            sessionStorage.setItem('HIRE_LIST_QUERY', JSON.stringify(this.filterData));
            sessionStorage.setItem('HIRE_LIST_PAGE', this.page.page_id);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
         * 任务资产充值
         * @param row
         */
        async handleChargeTaskMoney(row) {
            let result = await chargeMoneyDialog({
                shopNo: row.shop_info.shop_no
            });

            if(result) this.getTableData();
        },

        /**
         * 任务资产充值
         * @param row
         */
        async showChargeLog(row) {
            await chargeMoneyLog({
                hire_no: row.hire_no
            });
        }
    }
};
</script>

<style lang="less" scoped>
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
.zd-deposit-wrap {
    display: flex;
    align-items: center;

    .zd-deposit-price {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        border-radius: 50%;
    }
}

.zd-select-bood {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 300px;
    overflow: auto;

    .zd-select-radio {
        display: flex;
        margin: 20px 0 0 0;
        min-width: 120px;

        .zd-bood-wrap {
            display: flex;
            align-items: center;

            .zd-bood-image {
                width: 15px;
                height: 15px;
                margin-right: 8px;
                margin-left: 6px;
                border-radius: 50%;
            }
        }
    }
}

.zd-wrap {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
}

.zd-shop {
    height: 32px;
    display: flex;
    margin-bottom: 30px;
    align-items: center;

    &-title {
        margin-right: 10px;
        white-space: nowrap;
    }
}

.zd-shop-button {
    margin-left: 50%;
    transform: translateX(-50%);
}

</style>
<style lang="less">
.log-popper {
    .log-list {
        font-size: 12px;

        li {
            overflow: hidden;
            padding: 2px;

            span {
                &:first-child {
                    float: left;
                }

                &:last-child {
                    float: right;
                }
            }
        }
    }
}
</style>
